<template>
    <div class="page-container">
        <!--工具栏-->
        <div class="toolbar" style="float:left;padding-top:10px;padding-left:15px;">
            <el-form :inline="true" :model="filters" :size="size">
                <el-form-item>
                    <el-input v-model="filters.name" placeholder="用户名"></el-input>
                </el-form-item>
                <el-form-item>
                    <kt-button icon="fa fa-search" :label="$t('action.search')" perms="sys:role:view" type="primary"
                               @click="findPage(null)"/>
                </el-form-item>
                <el-form-item>
                    <kt-button icon="fa fa-plus" :label="$t('action.add')" type="primary"
                               @click="handleAdd"/>
                </el-form-item>
            </el-form>
        </div>
        <div class="toolbar" style="float:right;padding-top:10px;padding-right:15px;">
            <el-form :inline="true" :size="size">
                <el-form-item>
                    <el-button-group>
                        <el-tooltip content="刷新" placement="top">
                            <el-button icon="fa fa-refresh" @click="findPage(null)"></el-button>
                        </el-tooltip>
                        <el-tooltip content="列显示" placement="top">
                            <el-button icon="fa fa-filter" @click="displayFilterColumnsDialog"></el-button>
                        </el-tooltip>
                    </el-button-group>
                </el-form-item>
            </el-form>
            <!--表格显示列界面-->
            <table-column-filter-dialog ref="tableColumnFilterDialog" :columns="columns"
                                        @handleFilterColumns="handleFilterColumns">
            </table-column-filter-dialog>
        </div>
        <kt-table :data="pageResult" :columns="filterColumns" @findPage="findPage" @handleEdit="handleEdit" @handleDelete="handleDelete">
        </kt-table>

        <!--新增编辑界面-->
        <el-dialog :title="operation?'新增':'编辑'" width="40%" :visible.sync="dialogVisible" :close-on-click-modal="false">
            <el-form :model="dataForm" label-width="80px" :rules="dataRule" ref="dataForm" :size="size"
                     label-position="right">
                <el-form-item label="ID" prop="id" v-if="false">
                    <el-input v-model="dataForm.id" :disabled="true" auto-complete="off"></el-input>
                </el-form-item>
                <el-form-item label="用户名" prop="name">
                    <el-input v-model="dataForm.userName" auto-complete="off" :disabled="dataForm.disableUserName"></el-input>
                </el-form-item>
                <el-form-item label="密码" prop="password">
                    <el-input v-model="dataForm.password" type="password" auto-complete="off"></el-input>
                </el-form-item>
                <el-form-item label="邮箱" prop="email">
                    <el-input v-model="dataForm.email" auto-complete="off"></el-input>
                </el-form-item>
                <el-form-item label="手机" prop="mobile">
                    <el-input v-model="dataForm.mobilePhone" auto-complete="off"></el-input>
                </el-form-item>
                <el-form-item label="状态">
                    <el-select placeholder="请选择"style="width: 100%;" v-model="dataForm.status">
                        <el-option value="1" key="1" label="正常"></el-option>
                        <el-option value="0" key="0" label="冻结"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="角色" v-if="!operation">
                    <el-select v-model="role" placeholder="请选择"
                               style="width: 100%;">
                        <el-option v-for="item in userRoles" :key="item.id"
                                   :label="item.name" :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button :size="size" @click.native="dialogVisible = false">{{$t('action.cancel')}}</el-button>
                <el-button :size="size" type="primary" @click.native="submitForm" :loading="editLoading">
                    {{$t('action.submit')}}
                </el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
  import PopupTreeInput from "@/components/PopupTreeInput"
  import KtTable from "@/components/Core/KtTable"
  import KtButton from "@/components/Core/KtButton"
  import TableColumnFilterDialog from "@/components/Core/TableColumnFilterDialog"
  export default {
    components: {
      PopupTreeInput,
      KtTable,
      KtButton,
      TableColumnFilterDialog
    },
    data(){
      return {
        filters:{
          name:"",
          authorName:""
        },
        pageRequest:{pageNum:1,pageSize:15},
        pageResult:{},
        columns:[],
        filterColumns:[],
        size:"small",
        operation: false, // true:新增, false:编辑
        dialogVisible: false,
        editLoading: false,
        dataForm: {
          disableUserName: false,
          id: 0,
          userName: '',
          password: '',
          email: '',
          mobilePhone: '',
          status: 0
        },
        userRoles: [],
        role: '',
        dataRule: {
          name: [{ required: true, message: "名称不能为空", trigger: "blur" }]
        }
      }
    },
    methods: {
      findPage:function(data){
        if(data != null){
          this.pageRequest = data.pageRequest;
        }
        this.pageRequest.name = this.filters.name;
        this.pageRequest.authorName = this.filters.authorName;
        this.$api.user.findPage(this.pageRequest).then((res)=>{
          this.pageResult = res.body
        }).then(data!= null?data.callback:'');
      },
      // 处理表格列过滤显示
      initColumns: function () {
        this.columns = [
          {prop: "id", label: "ID", minWidth: 50},
          {prop: "userName", label: "用户名", minWidth: 50},
          {prop: "email", label: "邮箱", minWidth: 60},
          {prop: "mobilePhone", label: "手机号", minWidth: 60},
          {prop: "createTime", label: "注册时间", minWidth: 50},
          {prop: "unique", label: "唯一码", minWidth: 50},
          {prop: "status", label: "状态", minWidth: 40, formatter: function(row){
            if (row.status === 1){
              return "正常"
            }else if (row.status === 2){
              return "异常"
            }else if (row.status === 3){
              return "删除"
            }
          }}
        ]
        this.filterColumns = this.columns;
      },
      handleEdit: function(data){
        this.dialogVisible = true;
        this.operation = false
        this.dataForm = {
          disableUserName: true,
          id: data.row.id,
          userName: data.row.userName,
          password: '',
          email: data.row.email,
          mobilePhone: data.row.mobilePhone,
          status: data.row.status
        }
      },
      handleAdd: function(data){
        this.dialogVisible = true;
        this.operation = true
        this.dataForm = {
          disableUserName: false,
          id: 0,
          userName: '',
          password: '',
          email: '',
          mobilePhone: '',
          status: 0
        }
      },
      handleDelete: function(data){
        alert(data.row.id);
      },
      submitForm: function(){

      },
      // 处理表格列过滤显示
      handleFilterColumns: function (data) {
        this.filterColumns = data.filterColumns
        this.$refs.tableColumnFilterDialog.setDialogVisible(false)
      },
      // 处理表格列过滤显示
      displayFilterColumnsDialog: function () {
        this.$refs.tableColumnFilterDialog.setDialogVisible(true)
      },
    },
    mounted() {
      this.initColumns()
      this.$api.Role.findPage({}).then((res) => {
        this.userRoles = res.body.content;
      })
    }
  }
</script>

<style scoped>
    .page-container {
        height: 770px;
    }
</style>
